<template>
  <div class="header">
    <div
      @click="back"
      class="icon back">&#xe6a9;</div>
    <div class="title">{{title}}</div>
    <div
      @click="$emit('button')"
      class="button">{{buttonText}}</div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  methods: {
    back () {
      if (window.history.length > 0) {
        this.jump(-1)
      }
    }
  }
}
</script>
<style scoped lang="sass">
  .header
    width: 100%
    height: 45px
    background-color: #ff5700
    display: flex
    align-items: center
    position: relative
    .back
      width: 45px
      height: 45px
      display: flex
      align-items: center
      text-indent: 10px
      position: absolute
      top: 0
      left: 0
      color: #ffffff
    .button
      width: 35px
      height: 45px
      display: flex
      align-items: center
      flex-direction: row-reverse
      position: absolute
      padding-right: 10px
      top: 0
      right: 0
      font-size: .8rem
      color: #ffffff
    .title
      width: 100%
      height: 100%
      font-size: 1rem
      color: #ffffff
      display: flex
      align-items: center
      justify-content: center
</style>
